<template>
  <div>
    <el-card>
    <div class="search">
      <el-form :model="queryinfo" :inline="true">
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryinfo.status"
            placeholder="全部"
            clearable
            style="width: 200px"
          >
            <el-option label="待处理" value="0" />
            <el-option label="已处理" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleData"  v-hasPerm="['sys:userReport:get']"><i-ep-search />搜索</el-button>
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-button
      type="danger"
      :disabled="ids.length === 0"
      @click="deleteClick()"
      v-hasPerm="['sys:userReport:delete']"
      ><i-ep-delete />删除</el-button
    >
  </el-card>

  <el-card>
    <el-table
      :data="reportListInfo"
      v-loading="loading"
      border
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" />
      <!-- <el-table-column prop="id" label="序号" width="80" /> -->
				<el-table-column  label="序号" width="80">
    			<template #default="scope">
					   <span>{{scope.$index+1}}</span>
     			 </template>
   			 </el-table-column>
      <el-table-column prop="beReportUsername" label="被举报者" width="100" />
      <el-table-column prop="reportUsername" label="举报者" width="100" />
      <el-table-column prop="reason" label="举报原因" width="100" />
      <!-- <el-table-column prop="proof" label="证据" width="160" /> -->
			<el-table-column label="证据" width="160">
            <template #="{ row }">
                  <!-- <img :src="row.proof" alt="" style="width: 100px; height: 100px" /> -->
									<el-image
      							style="width: 100px; height: 100px"
     							 :src="row.proof"
     							 :zoom-rate="1.2"
      							:max-scale="7"
     							 :min-scale="0.2"
     							 :preview-src-list="[row.proof]"
										:preview-teleported="true"
										hide-on-click-modal
   							 />
            </template>
      </el-table-column>
      <el-table-column prop="managerUsername" label="管理员" width="100" />
      <el-table-column prop="result" label="处理结果" width="100" />
      <el-table-column prop="createTime" label="创建时间" width="200" />
      <el-table-column prop="manageTime" label="处理时间" width="200" />
      <!-- <el-table-column prop="status" label="状态" width="100" /> -->

      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <span v-if="scope.row.status === 0">待处理</span>
          <span v-else-if="scope.row.status === 1">已处理</span>
          <span v-else-if="scope.row.status === 2">违规</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="Operations" width="200">
        <template #default="scope">
          <el-button type="primary" @click="reportClick(scope.row.id)"   v-hasPerm="['sys:userReport:auth']" >审核</el-button>

          <el-button type="danger" @click="deleteReportInfo(scope.row.id)"  v-hasPerm="['sys:userReport:delete']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog v-model="reportVisible" title="审核结果">
    <el-form :model="form">
      <el-form-item label="审核结果为" :label-width="formLabelWidth">
        <!-- <el-input v-model="form.result" autocomplete="off" /> -->
				<el-select
            v-model="form.result"
            placeholder="审核"
            clearable
            style="width: 200px"
          >
            <el-option label="警告" value="0" />
            <el-option label="封号" value="1" />
          </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="reportVisible = false">取消</el-button>
        <el-button type="primary" @click="examineInfo"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reportList, reportInfo } from "../../../api/report/type";
import { onMounted, reactive, ref } from "vue";
import {
  getReportList,
  examine,
  deleteReport,
  deleteReportList,
} from "../../../api/report/index";

let reportListInfo = ref<reportList[]>();

const loading = ref(false);

const queryinfo = reactive<reportInfo>({
  pageNum: 1,
  pageSize: 10,
});

const reportVisible = ref(false);
const formLabelWidth = "140px";
const ids = ref([]);

/**
 * 处理结果
 */
const form = reactive({
  id: 0,
  result: "",
});

/**
 * 管理员删除举报
 */

async function deleteReportInfo(id: number) {
  await ElMessageBox.confirm("确认删除?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    deleteReport(id).then(() => {
      ElMessage.success("删除成功");
      handleData();
    });
  });
}

function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}

async function deleteClick() {
  let idList = ids.value as number[];
  await ElMessageBox.confirm("确认删除?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    deleteReportList(idList).then(() => {
      ElMessage.success("删除成功");
      handleData();
    });
  });
}

function reportClick(id:number) {
  reportVisible.value = true;
	form.id = id;
	form.result = '';
}

/**
 * 审核举报
 */
async function examineInfo() {
	if(form.result === ''){
		ElMessage.warning('请输入审核结果！')
		return;
	}
  await examine(form)
    .then(() => {
      ElMessage.success("审核成功");
			handleData();
      reportVisible.value = false;
    })
    .catch((error) => {
      console.error("Error:", error);
    })
    .finally(() => (loading.value = false));
}

/**
 * 重置
 */
async function resetQuery() {
  handleData();
}

/**
 * 获取举报列表
 */
async function handleData() {
  loading.value = true;
  await getReportList(queryinfo)
    .then(({ data }) => {
      reportListInfo.value = data.list;
      console.log(reportListInfo);
    })
    .catch((error) => {
      console.error("Error:", error);
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  handleData();
});
</script>
